<%--
  Created by IntelliJ IDEA.
  User: MyBatis
  Date: 2022/9/26
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>添加商品页面</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" action="javascript:void(0);"
                                      style="margin: 0 auto;max-width: 460px;padding-top: 40px;">

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商品类别:</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required" id="lei" name="lei" lay-filter="college">
                                                <option value="0">请选择</option>
                                                <option value="1">手机</option>
                                                <option value="2">电视</option>
                                                <option value="3">笔记本平板</option>
                                                <option value="4">出行 穿戴</option>
                                                <option value="5">耳机 音箱</option>
                                                <option value="6">家电</option>
                                                <option value="7">智能 路由</option>
                                                <option value="8">电源 配件</option>
                                                <option value="9">健康 儿童</option>
                                                <option value="10">生活 肩包</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-form-item" id="none" style="display: none">
                                        <label class="layui-form-label">二级类别:</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required" id="lei2" name="lei2">
                                                <option value="1">可选填</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商品名称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="请填写商品名称" name="name" id="name" class="layui-input" required />

                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商品备注:</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="商品详情" id="subtitle" name="subtitle" value="" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" action="javascript:void(0);"
                                      style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">游戏编号:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">639537</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账户余额:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">入款金额:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span style="font-size: 18px;color: #333;">1800 元</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">入款类型:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">保险箱</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">入款方式:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">人工入款</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注说明:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux" >备注说明</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="pear-btn pear-btn-success pre">上一步</button>
                                            <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
                                                &emsp;确认添加&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        添加成功
                                    </div>

                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="pear-btn pear-btn-success next">继续添加</button>
                                    <button class="pear-btn pear-btn-success">查看商品列表</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'step', 'code', 'element'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;

        layui.code();

        //商品类别下拉监听页面
        form.on('select(college)', function (data) {
            //当进行下拉选取时禁用第一个option标签
            $("select").find("option").eq(0).attr("disabled", "disabled");
            var lei = 0;
            if ($("select[name=lei]").val() == 1) {
                lei = 1
            } else if ($("select[name=lei]").val() == 2) {
                lei = 2
            } else if ($("select[name=lei]").val() == 3) {
                lei = 2
            } else if ($("select[name=lei]").val() == 4) {
                lei = 4
            } else if ($("select[name=lei]").val() == 5) {
                lei = 5
            } else if ($("select[name=lei]").val() == 6) {
                lei = 6
            } else if ($("select[name=lei]").val() == 7) {
                lei = 7
            } else if ($("select[name=lei]").val() == 8) {
                lei = 8
            } else if ($("select[name=lei]").val() == 9) {
                lei = 9
            } else if ($("select[name=lei]").val() == 10) {
                lei = 10
            }

            //异步获取二级下拉数据
            $.getJSON("${pageContext.request.contextPath}/LeiSelectServlet"
                , {"prentId": lei}
                , function (date) {
                    if (date.length > 0) {
                        $("#none").css("display", "block")
                        $("#none").find("option").remove();
                        $("#lei2").append("<option>可选填</option>")
                        for (var o in date) {
                            $("#lei2").append("<option>" + date[o].name + "</option>")
                        }
                        form.render();

                    } else {
                        $("#none").css("display", "none")
                    }
                },
                "json");

            form.render();
        })

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%',
            stepWidth: '600px',
            height: '500px',
            stepItems: [{
                title: '商 品 类 别'
            }, {
                title: '商 品 属 性'
            }, {
                title: '完 成 添 加'
            }]
        });

        form.on('submit(formStep)', function (data) {
            if ($("#lei").val()==0){
                layer.msg("请选择类型", {
                    icon: 2,
                    time: 2000
                });
                return false;
            }else if ($("#name").val()==""||$("#name").val()==null){
                layer.msg("请填写商品名称", {
                    icon: 2,
                    time: 2000
                });
                return false;
            }else if ($("#subtitle").val()==""||$("#subtitle").val()==null){
                layer.msg("请填写商品详情", {
                    icon: 2,
                    time: 2000
                });
                return false;
            }
            console.log(data.field.subtitle)

            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
            return false;
        });

        $('.next').click(function () {
            step.next('#stepForm');
            return false;
        });
    })
</script>
</body>
</html>
